<template>
	<view>
		<view class="d-flex j-sb a-center">
			<view class="font-lg font-weight">部门管理</view>
			<view class="rounded bg-primary button font-md text-white d-flex a-center j-center"  @click="onAdd">新增</view>
		</view>

		<uni-table class="mt-1" style="height: 280rpx"  ref="table" border stripe emptyText="暂无更多数据">
			<uni-tr class="position-sticky bg-white" >
				<uni-th><text class="font-md">部门名称</text></uni-th>
				<uni-th width="120"><text class="font-md">操作</text></uni-th>
			</uni-tr>
			<uni-tr v-for="(item, index) in tableData" :key="index">
				<uni-td>
					<text class="font-md" v-html="item.name"></text>
				</uni-td>
				<uni-td>
					
					<view class="d-flex a-center">
						<view @click="onEdit(item)" class="font-md text-primary">编辑</view>
						<view @click="onDel(item)" class="font-md text-blue ml">删除</view>
					</view>
					
				</uni-td>
			</uni-tr>
		</uni-table>
		
		<uni-popup ref="popupRef" type="center">
			<view class="p-2 bg-white model-shell ">
				<view class="font-lg font-weight">{{popupTitle}}</view>
				<view class="px-2 mt-2 font-md">
					<uni-forms labelWidth="46rpx" ref="formRef"  :modelValue="formData" :rules="rules">
						<uni-forms-item  label="上级部门:" name="pid">
							<uni-data-picker v-model="formData.pid"  popup-title="请选择部门" :localdata="dataPickerTree" placeholder="顶级部门" />
						</uni-forms-item>
						<uni-forms-item required class="mt-1"  label="部门名称:" name="name">
							<uni-easyinput type="text" v-model="formData.name" placeholder="请输入部门名称" />
						</uni-forms-item>
					</uni-forms>
					
					<view class="d-flex mt-3 ">
						<view class="flex-1 px-1 d-flex a-center j-center">
							<view class="rounded bg-secondary button font-md text-white" @click="popupRef.close()">取消</view>
						</view>
						<view class="flex-1 px-1 d-flex a-center j-center">
							<view class="rounded bg-primary button font-md text-white" type="primary" @click="onsave">保存</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { useStore } from '@/store/index.js';
const store = useStore();

const tableData = ref([])
const dataPickerTree = ref([]);
const popupRef= ref(null);
const popupTitle = ref('');

const formData = ref({});
const formRef = ref(null);
const rules = ref({
	name: {
		rules: [{
			required: true,
			errorMessage: '请输入部门名称',
		}],
	}
});






const reLoad = () => {
	tableData.value = store.depStore.getTableTree()
	dataPickerTree.value = store.depStore.getDataPickerTree()
	formData.value = {id:'',name:'',pid:0};
};


const onAdd = (type) => {
	popupTitle.value = '新增部门';
	popupRef.value.open();
};

const onEdit = (item) => {
	popupTitle.value = '编辑部门';
	formData.value = item;
	popupRef.value.open();
};

const onDel = (item) => {
	
	const child =  store.depStore.list.find(val =>  item.id == val.pid)
	
	if(child){
		uni.$xwl.toast('该部门下有子部门，无法删除')
		return
	}
	
	store.depStore.del(item.id)
	reLoad()
};


const onsave = () => {
	uni.showLoading()
	popupRef.value.close();
	formRef.value.validate().then((res) => {
			uni.hideLoading();
			store.depStore.save(formData.value)
			reLoad()
	}).catch((err) => {
			uni.hideLoading();
			console.log('表单错误信息：', err);
	});
	
	
};

onLoad(() => {reLoad()});
</script>

<style lang="scss">
	.button {
		width: 60rpx;
		height: 20rpx;
	}
	.model-shell {
		width: 300rpx;
		height: 160rpx;
		border-radius: 6rpx;
		.form-label {
			text-align: right;
			width: 50rpx;
		}
	}
</style>
